<template>
	<view>
		<uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
			<uni-group title="备忘录信息" top="0" :icon="icon" @submit="submit" @delete="deleteMemo">
				<uni-forms-item name="memoTitle" required label="标题">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.memoTitle"
						placeholder="请输入标题"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item required name="memoDate" label="时间">
					<picker mode="date" :value="date" :start="startDate()" :end="endDate()" @change="bindDateChange">
						<view class="date-picker">{{ date }}</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item name="memoText" label="正文">
					<uni-easyinput type="textarea" v-model="formData.memoText" placeholder="请输入正文"></uni-easyinput>
				</uni-forms-item>
			</uni-group>
		</uni-forms>
	</view>
</template>

<script>
export default {
	data() {
		return {
			icon: [{
				src: '../../static/interaction/edit-active.png',
				emit: 'submit'
			},
			{
				src: '../../static/interaction/delete-active.png',
				emit: 'delete'
			}],
			formData: {
				memoId: 0,
				memoText: '',
				memoDate: '',
				memoText: ''
			},
			date: '',
			rules: {
				memoText: {
					rules: [{
						required: true,
						errorMessage: '请输入标题'
					},
					{
						minLength: 3,
						maxLength: 15,
						errorMessage: '标题长度在 {minLength} 到 {maxLength} 个字符'
					}
					]
				},
				birth: {
					rules: [
						{
							required: true,
							errorMessage: '请选择时间'
						},
						{
							format: 'timestamp',
							errorMessage: '必须是时间戳'
						}
					]
				},
				memoText: {
					rules: [{
						format: 'string'
					}]
				},
			}
		}
	},
	onShow(){
		let memo = uni.getStorageSync('memo') || {}
		if (memo) {
				this.formData = { ...memo }
				this.formData.page = null
				this.date = memo.memoDate
			}
	},
	methods: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		},
		bindDateChange: function (e) {
			this.date = e.detail.value
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		async deleteMemo() {
			let result = await this.$API.memo.deleteMemo(this.formData)
			if (result.code == 200) {
				uni.showToast({
					title: result.data,
					icon: 'none',
					duration: 1000
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			} else {
				uni.showToast({
					title: result.msg,
					icon: 'none',
					duration: 1000
				})
			}
		},
		submit() {
			this.formData.memoDate = new Date(this.date)
			this.$refs['form']
				.validate()
				.then(async res => {
					let result = await this.$API.memo.saveOrUpdateMemo({
						...this.formData
					})
					if (result.code == 200) {
						uni.showToast({
							title: result.data,
							icon: 'none',
							duration: 1000
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else {
						uni.showToast({
							title: result.msg,
							icon: 'none',
							duration: 1000
						})
					}
				})
				.catch(errors => {
					console.error('验证失败：', errors)
				})
		},
	}
}
</script>

<style>
.uni-input-border {
	padding: 0 20rpx;
	width: 100%;
	color: #666;
	border: 2rpx #e5e5e5 solid;
	border-radius: 6rpx;
	box-sizing: border-box;
}

.date-picker {
	height: 80rpx;
	padding: 20rpx;
	width: 100%;
	color: #666;
	border: 2rpx #e5e5e5 solid;
	border-radius: 12rpx;
	box-sizing: border-box;
}
</style>